<template>
  <div class="indexfoot">
    <div class="footnav clear">
      <div>
        <i class="iconfont icon-QQfang"></i>
        <span>优质保障</span>
      </div>
      <div>
        <i class="iconfont icon-QQfang"></i>
        <span>全程监控</span>
      </div>
      <div>
        <i class="iconfont icon-QQfang"></i>
        <span>礼拜五特惠</span>
      </div>
      <div>
        <i class="iconfont icon-QQfang"></i>
        <span>基地直供</span>
      </div>
      <div>
        <i class="iconfont icon-QQfang"></i>
        <span>准时送达</span>
      </div>
    </div>
    <div class="footmiddle">
      <div class="foottext clear">
        <div class="footlogo">
          <img src="../assets/img/footlogo.jpg" alt />
          <div>
            服务时间：08:00-22:00
            <i class="iconfont icon-QQfang"></i>
            <strong>400-800-8820</strong>
          </div>
        </div>
        <div class="erweima">
          <img src="../assets/img/erweima.jpg" alt />
          <div>礼拜五官方微信</div>
        </div>
        <div class="erweima">
          <img src="../assets/img/erweima.jpg" alt />
          <div>礼拜五官方微信</div>
        </div>
        <div class="footzi">
          <div class="footzicoll">
            <div class="footzi-top">关于礼拜五</div>
            <div>新用户注册</div>
            <div>在线下单</div>
            <div>支付方式</div>
          </div>
          <div class="footzicoll">
            <div class="footzi-top">关于礼拜五</div>
            <div>新用户注册</div>
            <div>在线下单</div>
            <div>支付方式</div>
          </div>
          <div class="footzicoll">
            <div class="footzi-top">关于礼拜五</div>
            <div>新用户注册</div>
            <div>在线下单</div>
            <div>支付方式</div>
          </div>
          <div class="footzicoll">
            <div class="footzi-top">关于礼拜五</div>
            <div>新用户注册</div>
            <div>在线下单</div>
            <div>支付方式</div>
          </div>
        </div>
      </div>
    </div>
    <indexlowest />
  </div>
</template>

<script>
import indexlowest from "./indexlowest.vue";
import "@/assets/font/iconfont.css";
export default {
  props: [],
  name: "index",
  components: {
    indexlowest
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.indexfoot {
  border-top: 1px solid #ccc;
}
.footnav {
  width: 80%;
  margin: 0px auto;
  display: flex;
  font-size: 1.6rem;
  justify-content: space-around;
}
.footnav div {
  /* border-left: 1px solid #ccc; */
  text-align: center;
  margin: 10px 0px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.footnav div:last-of-type {
  border-right: none;
}
.footnav div i.iconfont {
  font-size: 3rem;
}
.indexfoot .footnav div {
}
.footmiddle {
  border-top: 1px solid #ccc;
}
.footmiddle .foottext {
  width: 80%;
  margin: 0px auto;
  padding: 1rem 0px ;
  display: flex;
  justify-content: space-around;
}
.footlogo {
  width: 30%;
  text-align: center;
  font-size: 0.9rem;
  line-height: 2rem;
}
.footlogo strong {
  color: #f08200;
}
.footlogo img {
  width: 80%;
}
.erweima {
  width: 12%;
}
.erweima img {
  width: 80%;
}
.footzi {
  width: 46%;
  display: flex;
  justify-content: space-around;
}
.footzi div{
    color: #999;
    line-height: 1.6rem;
}
.footzi .footzi-top{
    color: black;
    line-height: 3rem;
}
</style>
